<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>分享生成海报</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
    }
    .content{
      height: 100%;
      padding-top: 20px;
    }
    .poster,#posterAfter{
      width: 322px;
      height: 551px;
      display: block;
      margin: auto;
      position: relative;
    }
    .poster img{
      width: 100%;
    }
    #qrcode img{
      max-width: 100%;
    }
    #qrcode{
      position: absolute;
      bottom: 5px;
      right: 5px;
      background: #fff;
      padding: 5px;
      width: 50px;
      height: 50px;
    }
    .txt{
      position: absolute;
      bottom: 140px;
      width: 100%;
      text-align: center;
      font-size: 12px;
      left: 0;
      white-space: nowrap;
      color: #fff;
    }
    .btn{
      width: 100px;
      height: 40px;
      margin: auto;
      background: #0262c2;
      color: #fff;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      margin-top: 40px;
    }
  </style>
</head>
<body>

  <!-- !注意，如果使用背景图片的话，生成的图片会模糊 -->
  <div class="content">
    <!-- 生成海报区域start -->
    <div class="poster">

      <!-- 背景start -->
      <img src="images/share-bj_03.jpg" alt="">
      <!-- 背景end -->

      <!-- 二维码 start -->
      <div class="" id="qrcode">
      </div>
      <!-- 二维码 end -->

      <!-- 如果有文字的话 -->
      <div class="txt">基于(html2canvas/qrcode)生成h5海报图</div>
    </div>
    <div class="btn" id="btn">生成海报</div>

    <!-- 生成海报区域end -->

    <!-- 生成后的海报start -->
    <img id="posterAfter" src="" alt="">
    <!-- 生成后的海报end -->
    
  </div>
  
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/qrcode.min.js"></script>
<script>
  $( function () {
    new QRCode(document.getElementById("qrcode"), {
      text: "http://hb.xiaohuanzi.cn",
      width: 50,
      height: 50,
    });

    var content = $('.poster'); // 获取生成海报的区域
    $('#btn').on('click', function (){
      html2canvas(content[0], {
        scale: 2, // 放大2倍是因为 1倍的时候在高分辨率下会出现模糊的情况
        useCORS: true // 【重要】开启跨域配置
      }).then(function(canvas) {
        $('#posterAfter').attr('src', canvas.toDataURL("image/png"));
      });
    })
  });
</script>
</html>